<template>
    <view class="wrap">
        <image class="top-banner" src="@/pages/minePages/static/footprintDetail/top-banner.jpg" mode="aspectFill"></image>
        <view class="details">
            <view class="title">这一天，你来到了清远，照片记录了你的足迹</view>
            <view class="date-wrap">
                <image src="@/pages/minePages/static/footprintDetail/date-icon.png" mode=""></image>
                <view class="">2020.8.17</view>
            </view>
            <view class="location-wrap">
                <image src="@/pages/minePages/static/footprintDetail/location-icon.png" mode=""></image>
                <view class="">清远黄腾峡景区</view>
            </view>
            <view class="map"></view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {},
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.wrap {
    .top-banner {
        width: 750rpx;
        height: 500rpx;
    }
    .details {
        position: relative;
        z-index: 1;
        margin-top: -50rpx;
        background: #fff;

        border-radius: 10rpx 10rpx 0 0;
        padding: 45rpx 30rpx 30rpx;
        .title {
            font-size: 32rpx;
            font-weight: bold;
            padding-bottom: 35rpx;
        }
        .date-wrap,
        .location-wrap {
            display: flex;
            font-size: 26rpx;
            line-height: 26rpx;
            align-items: center;
        }
        .date-wrap {
            padding-bottom: 30rpx;
            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 20rpx;
            }
        }
        .location-wrap {
            padding-bottom: 50rpx;
            image {
                width: 24rpx;
                height: 30rpx;
                margin-right: 20rpx;
            }
        }
    }
}
</style>
